<template>
  <div class="container">
    <div class="auto">
      <a-card title="设置" hoverable>
        <a-button slot="extra" type="primary" @click="submit" style="float: right;">保存</a-button>
        <a-spin :spinning="confirmLoading">
          <div class="pub_tit det_bar clearfix wow fadeInDown animated" data-wow-delay="0.1s">
            <em class="bt">大屏设置</em>
          </div>
          <a-form :form="form">
            <a-row>
              <a-col span="6">
                <a-form-item label="空白面板" >
                  <a-radio-group :options="options" v-decorator="['blankpanel', validatorRules.blankpanel ]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="rowStyle">
              <a-col span="23">
                <a-form-item
                  label="大屏居中模块"
                  style="height: 300px">
                  <j-editor v-decorator="['centercontent',validatorRules.centercontent]" triggerChange :max_height="300" placeholder="请输入需要在大屏展示的内容"></j-editor>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <div class="pub_tit det_bar clearfix wow fadeInDown animated" data-wow-delay="0.1s">
                <em class="bt">首页设置</em>
              </div>
            </a-row>
            <a-row>
              <a-col span="6">
                <a-form-item label="实验室名称1" >
                  <a-input v-decorator="['lab1', validatorRules.lab1 ]" placeholder="请输入实验室名称！"></a-input>
                </a-form-item>
              </a-col>
              <a-col span="6" offset="1">
                <a-form-item label="所属实验设备1" >
                  <a-select mode="multiple" v-decorator="['equipmentId1', validatorRules.equipmentId1 ]" placeholder="请选择所属实验设备！">
                    <a-select-option v-for="item in deviceList" :key="item.id" :value="item.id + ''">{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="6">
                <a-form-item label="实验室名称2" >
                  <a-input v-decorator="['lab2', validatorRules.lab2 ]" placeholder="请输入实验室名称！"></a-input>
                </a-form-item>
              </a-col>
              <a-col span="6" offset="1">
                <a-form-item label="所属实验设备2" >
                  <a-select mode="multiple" v-decorator="['equipmentId2', validatorRules.equipmentId2 ]" placeholder="请选择所属实验设备！">
                    <a-select-option v-for="item in deviceList" :key="item.id" :value="item.id + ''">{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="6">
                <a-form-item label="实验室名称3" >
                  <a-input v-decorator="['lab3', validatorRules.lab3 ]" placeholder="请输入实验室名称！"></a-input>
                </a-form-item>
              </a-col>
              <a-col span="6" offset="1">
                <a-form-item label="所属实验设备3" >
                  <a-select mode="multiple" v-decorator="['equipmentId3', validatorRules.equipmentId3 ]" placeholder="请选择所属实验设备！">
                    <a-select-option v-for="item in deviceList" :key="item.id" :value="item.id + ''">{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="6">
                <a-form-item label="设置首周时间" >
                  <j-date
                     v-decorator="['firstweek', validatorRules.firstweek ]" 
                    :trigger-change="true"
                    :showTime="true"
                    date-format="YYYY-MM-DD"
                    style="width:100%"
                    placeholder="请设置首周时间" >
                  </j-date>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-spin>
      </a-card>
    </div>
  </div>
</template>

<script>
import JDate from '@/moduleCompontent/JDate.vue';
import Vue from 'vue'
import { USER_INFO } from  "@/store/mutation-types"
import { getAction, postAction } from '@/api/manage'
import JEditor from '@/moduleCompontent/JEditor'
import pick from 'lodash.pick'
import '../../public/css/style.css';
export default {
  name: 'largeScreenSettings',
  components: {
    JEditor,
    JDate
  },
  beforeRouteEnter (to, from, next) {
    window.scrollTo(0, 0);
    if(Vue.ls.get(USER_INFO) && Vue.ls.get(USER_INFO).username && Vue.ls.get(USER_INFO).role == '1') {
      next()
    } else {
      next(false)
    }   
  },
  // beforeRouteLeave (to, from, next) {
  //   this.$confirm({
  //     title: '警告',
  //     content: '设置未保存，确定要退出吗?',
  //     okText: '退出',
  //     okType: 'danger',
  //     cancelText: '取消',
  //     onOk() {
  //       next()
  //     },
  //     onCancel() {
  //       next(false)
  //     },
  //   });
  // },
  data() {
    return {
      deviceList: [],
      model: {},
      options: [
        {
          label: '启用',
          value: 1
        },
        {
          label: '不启用',
          value: 0
        }
      ],
      confirmLoading:  false,
      form: this.$form.createForm(this),
      validatorRules: {
        blankpanel: {rules: [{required: true, message: '请选择是否启用空白面板!'}]},
        centercontent: {}
      }
    }
  },
  created() {
    this.getData()
    this.getDeviceList()
  },
  methods: {
    getDeviceList() {
      let self = this
      getAction('/bigscreen/listequipment', {}).then(res => {
        if(res.code == 0) {
          self.deviceList = [...res.result]
        } else {
          self.$message.error(res.msg)
        }
      })
    },
    getData() {
      let self = this
      this.$nextTick(() => {
        self.confirmLoading = true
        getAction('/bigscreen/info', {}).then(res => {
          if(res.code == 0) {
            self.model = res.result
            self.model.equipmentId1 = self.model.equipmentId1.split(',')
            self.model.equipmentId2 = self.model.equipmentId2.split(',')
            self.model.equipmentId3 = self.model.equipmentId3.split(',')
            self.model.blankpanel = parseInt(self.model.blankpanel)
            self.form.setFieldsValue(pick(self.model,'blankpanel', 'centercontent',  'lab1', 'lab2', 'lab3','equipmentId1', 'equipmentId2', 'equipmentId3', 'firstweek'))
          } else {
            self.$message.error(res.msg)
          }
        }).finally(() => {
          self.confirmLoading = false
        })
      })
    },
    submit() {
      let self = this
      this.form.validateFields((err, value) => {
        if (!err) {
          self.confirmLoading = true
          let formData = Object.assign(this.model, value)
          formData.equipmentId1 = formData.equipmentId1.join(',')
          formData.equipmentId2 = formData.equipmentId2.join(',')
          formData.equipmentId3 = formData.equipmentId3.join(',')
          postAction('/bigscreen/update', formData).then(res => {
            if(res.code == 0) {
              self.$message.success(res.msg)
              self.confirmLoading = false
              // self.getData()
              setTimeout(() => {
                window.location.reload()
              },400)
            } else {
              self.$message.error(res.msg)
              self.confirmLoading = false
            }
          })
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
  .rowStyle {
    margin-bottom: 30px;
  }
</style>
